<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>珠宝配饰</title>
    <link rel="stylesheet" href="css/resrt.css">
    <link rel="stylesheet" href="css/Jewelry Show.css">
    <link rel="stylesheet" href="css/jewelry-m.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/common-m.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.js">
    </script>
</head>

<body>
    <div class="head-t">
        <div class="header">
            <div class="header-c">
                <nav class="header-nav">
                    <a href="#" class="logo">
                        <img src="http://bufantec.com/site/hunsha/static/img/logo-1.png" alt="">
                        <img class="logo-num" src="http://bufantec.com/site/hunsha/static/img/logo-2.png" alt="">
                    </a>
                    <ul class="nav-list">
                        <li class="nav-item ">
                            <a href="./index.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a href="./Weeding Dress.html">婚纱礼服</a>
                        </li>
                        <li class="nav-item active">
                            <a href="./Jewelry Show.html">珠宝配饰</a>
                        </li>
                        <li class="nav-item">
                            <a href="./new active.html">最新活动</a>
                        </li>
                        <li class="nav-item">
                            <a href="./about.html">关于我们</a>
                        </li>
                    </ul>
                    <div class="box">
                        <div class="line">
                        </div>
                        <div class="line">
                        </div>
                        <div class="line">
                        </div>
                    </div>
                </nav>
            </div>

        </div>
    </div>

    <div class="container  " id="header">
        <div class="main">
            <div class="main-c">
                <div class="main-l">
                    <div class="weeding-top"> <img src="img/珠宝配饰/da1.png" alt=""></div>
                    <div class="weeding-bt"> <img src="img/珠宝配饰/da2.png" alt=""></div>
                    <p class="introduce">Veronica HardWear系列优雅与颠覆精神并存，敏感捕捉到漫步纽约的时尚女性的精髓与能量。璀璨的钻石， 更加凸显这枚戒指的女性魅力。
                    </p>
                    <p class="size">钻戒: $1999.00 <br> 耳饰: $3899.00</p>


                </div>
                <div class="main-r">
                    <p class="line"></p>
                    <p class="style">HardWear系列</p>
                    <p class="her">对戒,耳饰</p>
                    <p class="price">$23199.00</p>
                    <p class="size-r"></p>
                    <p class="intr">18K白金镶圆形明亮式切割钻石；钻石总重5.99克拉；直径 <br> 12毫米；舒适设计,易于佩戴.

                    </p>
                    <div class="more">立即预约</div>
                </div>

            </div>
            <div class="show">
                <div class="show-c">
                    <ul class="butt">
                        <li class="butt1"> <a href=""> 戒指</a></li>
                        <li class="butt2"> <a href=""> 项链</a></li>
                        <li class="butt3"> 其他</li>
                    </ul>
                    <div class="model">
                        <div class="arr-l showprev">
                            <a href="javascript:;"> <img src="img/珠宝配饰/arr-l.png" alt=""></a>
                        </div>
                        <div class="arr-r shownext">
                            <a href="javascript:;"><img src="img/珠宝配饰/arr-r.png" alt=""></a>
                        </div>
                        <div class="show-container ">
                            <ul class="model-nav swiper-wrapper">
                                <li class="model-item swiper-slide"><img src="img/珠宝配饰/小1.png" alt="">
                                    <div class="mask">VERONICA Victoria™系列 Alternating戒指
                                    </div>
                                </li>
                                <li class="model-item swiper-slide"><img src="img/珠宝配饰/小2.png" alt="">
                                    <div class="mask">VERONICA Victoria™系列 Alternating戒指
                                    </div>
                                </li>
                                <li class="model-item swiper-slide"><img src="img/珠宝配饰/小3.png" alt="">
                                    <div class="mask">VERONICA Victoria™系列 Alternating戒指
                                    </div>
                                </li>
                                <li class="model-item swiper-slide"><img src="img/珠宝配饰/小4.png" alt="">
                                    <div class="mask">VERONICA Victoria™系列 Alternating戒指
                                    </div>
                                </li>
                                <li class="model-item swiper-slide"><img src="img/珠宝配饰/小5.png" alt="">
                                    <div class="mask">VERONICA Victoria™系列 Alternating戒指
                                    </div>
                                </li>

                            </ul>
                        </div>

                    </div>
                    <div class="more">MORE</div>
                </div>
            </div>

            <div class="footer">
                <div class="footer-c">
                    <div class="record">
                        <p>网站备案号：豫ICP备110121210号</p>
                        <p>增值电信业务经营许可证号：豫B2-20100033</p>
                    </div>
                    <div class="join">
                        <div class="join-item copyright">
                            © 2018 VERONICA
                        </div>
                        <a href="./static/pages/about/index.html" class="join-item chat">
        联系我们
      </a>
                        <a href="./static/pages/about/index.html" class="join-item join-us">
        加入我们
      </a>
                    </div>
                    <div class="toup">
                        <a class="toup-icon" href="#header"></a>
                        <a class="phone-icon" href="tel:17777777777"></a>
                    </div>
                </div>
            </div>
        </div>
</body>
<script src="js/index.js"></script>
<script>
    var prev = document.querySelector('.showprev')
    var next = document.querySelector('.shownext')
    var showSwiper = new Swiper('.show-container', {

        slidesPerView: 5,
        spaceBetween: 10,

        // direction: getDirection(),
        loop: true,
        // autoplay: true

    });
    prev.onclick = function() {
        showSwiper.slidePrev();
    }
    next.onclick = function() {
        showSwiper.slideNext();

    }
</script>

</html>